<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>数据展示</title>
    <script src="../js/jquery-1.8.3.js"></script>
    <script src="../layui/layui.js"></script>
    <link rel="stylesheet" href="${pageContext.request.contextPath}/layui/css/layui.css" media="all">
    <script src="${pageContext.request.contextPath}/js/china.js"></script>
    <script src="../js/echarts.js"></script>

</head>

<body class="layui-layout-login">
<!-- 为 ECharts 准备一个具备大小（宽高）的 DOM -->
<div id="main" style="width: 600px;height:400px;"></div>
<div id="main2" style="width: 600px;height:400px;"></div>

<div id="main3" style="width: 600px;height:400px;"></div>

</body>

<script>

    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById('main'));

    var myChart2 = echarts.init(document.getElementById('main2'));

    var myChart3 = echarts.init(document.getElementById('main3'));

    $(function () {
        $.ajax({
            url: '${pageContext.request.contextPath}/user/countSex'
            ,success:function (data) {
                // 指定图表的配置项和数据
                var option = {
                    //图表的标题
                    title: {
                        text: '持明法洲用户男女人数对比'
                    },
                    // 工具栏
                    tooltip: {},
                    // legend 传奇 在数学中指的是 系列
                    // 在代码中 代表数据的类型
                    legend: {
                        data:['人数']
                    },
                    // xAxis x轴坐标
                    xAxis: {
                        data: ["男","女"]
                    },
                    // y 轴坐标 自动生成
                    yAxis: {},
                    // 给x轴赋值
                    series: [{
                        // name 必须和 legend 中的配置一样
                        name: '人数',
                        // 定义是展示类型 bar柱状图 line折线图 pie 饼状图
                        type: 'bar',
                        // x轴坐标对应的坐标值
                        data: data
                    }]
                };

                myChart.setOption(option);

            }
        })

        $.ajax({
            // 绘制图表。

            url: '${pageContext.request.contextPath}/user/selectPro'
            ,success:function (data) {
                // 指定图表的配置项和数据
                var option = {
                    //图表的标题
                    title: {
                        text: '持明法洲用户省份人数对比'
                    },
                    // 工具栏
                    tooltip: {},
                    // legend 传奇 在数学中指的是 系列
                    // 在代码中 代表数据的类型
                    legend: {
                        data: ['数量']
                    },
                    // xAxis x轴坐标
                    xAxis: {
                        data: data.name
                    },
                    // y 轴坐标 自动生成
                    yAxis: {},
                    // 给x轴赋值
                    series: [{
                        // name 必须和 legend 中的配置一样
                        name: '数量',
                        // 定义是展示类型 bar柱状图 line折线图 pie 饼状图
                        type: 'line',
                        // x轴坐标对应的坐标值
                        data: data.value
                    }]
                };
                myChart2.setOption(option);
            }
        });

        $.ajax({
            // 绘制图表。

            url: '${pageContext.request.contextPath}/user/getByDayCount'
            ,success:function (data) {
                var option1 = {
                    title : {
                        text: '过去三周用户注册量变化',
                    },
                    tooltip : {
                        trigger: 'axis'
                    },
                    legend: {
                        data:['人数变化']
                    },
                    toolbox: {
                        show : true,
                        feature : {
                            mark : {show: true},
                            dataView : {show: true, readOnly: false},
                            magicType : {show: true, type: ['line', 'bar']},
                            restore : {show: true},
                            saveAsImage : {show: true}
                        }
                    },
                    calculable : true,
                    xAxis : [
                        {
                            type : 'category',
                            boundaryGap : false,
                            data : ['过去三周内','过去两周内','过去一周内']
                        }
                    ],
                    yAxis :{},
                    series : [
                        {
                            name:'注册人数',
                            type:'line',
                            data:[data.three, data.two, data.one],
                            markPoint : {
                                data : [
                                    {type : 'max', name: '最大值'},
                                    {type : 'min', name: '最小值'}
                                ]
                            },
                            markLine : {
                                data : [
                                    {type : 'average', name: '平均值'}
                                ]
                            }
                        }
                    ]
                };
                myChart3.setOption(option1);
            }
        });
    })



</script>

</html>
